<template>
  <div class="content">
    <!-- 要使用span光标才不会出现错位的现象 -->
    <span id="typedjs" />
  </div>
</template>

<script setup lang="ts">
import Typed from 'typed.js'

const typed = ref(null)

onMounted(() => {
  const options = {
    strings: [
      '在上面的代码中，我们首先从typed.js导入Typed类。在onMounted生命周期钩子中，我们创建了Typed的实例，指定了要打字的h1元素的ID，并提供了一些基本的配置选项。这样，当组件挂载到DOM时，会看到动态的打字效果。',
    ],
    typeSpeed: 100, //打字的速度
    smartBackspace: true, // 开启智能退格 默认false
    backSpeed: 50, //后退速度
    backDelay: 500, //后退延迟
    loop: true, //是否循环.
    startDelay: 1000, //起始时间
    fadeOut: true, //淡出效果
    fadeOutClass: 'typed-fade-out', //fadeOutClass 用于淡入淡出动画的css类
    fadeOutDelay: 500, //以毫秒为单位淡出延迟
    showCursor: true, // 是否显示光标
    cursorChar: '|', //光标的字符
  }

  typed.value = new Typed('#typedjs', options)
})
</script>

<style scoped>
.content {
  padding: 50px;
  font-size: 20px;
  line-height: 30px;
}
</style>
